<template>
	<view style="">
		<view style="color: #1E1E1E;font-size:50rpx;margin-top: 250rpx;font-weight: 700;margin-left: 30rpx;">手机号码登录
		</view>
		<view class="flex  align-center" :class=" selected==true ? 'selected' : 'sess' " style="">
			<input style="font-size:35rpx;color: #BDC4CE;margin-left: 15rpx;height: 100%;line-height: 112rpx;"
				v-model="phone" placeholder="请输入手机号" type="number" name="phone" @click="selected=true"
				@blur="selected=false"></input>
		</view>
		<view class="flex align-center yinseer" style="text-align: center;">
			<image :src="'/static/' + (isAgree ? 'check' : 'nocheck') + '.png'" @click="isAgree = !isAgree"
				style="height: 24rpx;width: 24rpx;margin-left: 10rpx;border-radius: 50%;"></image>
			<view class="flex" style="color: #999999;font-size: 24rpx;margin-left: 15rpx;">
				我已阅读并接受
				<view @click="$tools.goPageNoAuth('/pages/common/user_protocol')" style="color: #4984FA;">“共厂家居服务协议”
				</view>
				和
				<view @click="$tools.goPageNoAuth('/pages/common/privacy_protocol')" style="color: #4984FA;">“隐私协议”
				</view>
			</view>
		</view>
		<button style="margin-top:100rpx;" class="common-btn  flex justify-center" @click="login">
			<text v-if="isLoading" class="cuIcon-loading2 cuIconfont-spin"></text>
			<!-- <text style="margin-top: 5rpx;"></text> -->
			一键登录
		</button>
		<!-- 	<view style="font-size: 31rpx;color: #7A6A56;margin-top: 85rpx;">立即注册</view> -->
		<view class="flex align-center justify-center" style="margin-top: 200rpx;">
			<view style="width: 96rpx;height: 0rpx;opacity: 1;border: 1rpx solid #C9C9D1;margin-right: 28rpx;">
			</view>
			<view style="color: #1E1E1E;font-size: 28rpx;">第三方登录</view>
			<view style="width: 96rpx;height: 0rpx;opacity: 1;border: 1rpx solid #C9C9D1;margin-left: 28rpx;">
			</view>
		</view>
		<view class="flex justify-center align-center" style="text-align: center;margin-top: 100rpx;">
			<view style="width: 30%;" @click="wei_login">
				<image src="../../static/weixin.png" mode="aspectFit" style="width:100rpx;height:100rpx;">
				</image>
				<view style="font-size: 27rpx;color:#7A6A56;margin-top: 8rpx;">微信</view>
			</view>
		</view>
		<view class="flex justify-center" style="color: rgba(30,30,30,0.3);;font-size: 24rpx;margin-top: 50rpx;">
			重庆左定右制网络科技有限公司</view>
		<!-- 适配平板占位盒子 -->
		<view style="width:100%;height: 80rpx;"></view>
	</view>
</template>
<script>
	import {
		getParameterByName
	} from "@/common/libs/util.js"; //引入工具类方法
	import textData from "@/common/config-text.js";
	export default {
		data() {
			return {
				// 协议同意
				isAgree: false,
				phone: null,
				// 验证码
				code: '',
				selected: true,
				// 是否加载
				isLoading: false,
				getCodeisWaiting: false,
				text: {},
				currentType: {},
				auths: null,
			}
		},
		onLoad() {},
		onUnload() {
			// 关闭splash
			// #ifdef APP-PLUS
			plus.navigator.closeSplashscreen();
			// #endif
		},
		methods: {
			/**
			 * 勾选协议多选框
			 */
			CheckboxChange() {
				this.isAgree = this.isAgree ? false : true
			},
			login() {
				if (!this.$tools.validPhone(this.phone)) {
					return;
				}
				// 是否勾选用户协议
				if (!this.isAgree) {
					this.$tools.showToast('请勾选用户协议及隐私协议')
					return false;
				}
				let data = {
					phone: this.phone,
				}
				this.$api.code(data).then((res) => {
					if (res.data.code == 0) {
						uni.navigateTo({
							url: '/pages/login/code_login?sign=' + res.data.result + '&phone=' + this.phone
						})
					}
				})
			},
			wei_login() {
				let that = this
				if (this.isLoading) {
					return;
				}
				this.isLoading = true;
				let _this = this;
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						console.log(loginRes.authResult);
						// 获取用户信息
						uni.getUserInfo({
							provider: 'weixin',
							success: function(infoRes) {
								_this.weixin(infoRes.userInfo)
								console.log('用户昵称为：' + infoRes.userInfo.nickName);
							},
							fail: function(e) {
								console.log(e)
								uni.showToast({
									icon: "none",
									title: "微信授权失败，请重试"
								});
							},
						});
					}
				});
				// #ifdef H5
				if (navigator.userAgent.indexOf("Html5Plus") == -1) {
					let info = JSON.parse(uni.getStorageSync("userinfo"));
					this.wxLogin(info.unionId, info.openId);
				} else {
					plus.oauth.getServices(
						(services) => {
							var auths = null;
							for (var i in services) {
								var service = services[i];
								if (service.id == "weixin") {
									auths = service;
								}
							}
							this.authLoginH5(auths);
						},
						(e) => {
							uni.showToast({
								title: "获取分享服务列表失败：" + e.message + " - " + e.code,
								icon: none,
								duration: 3000,
							});
						}
					);
				}
				// #endif	
			},
			authLoginH5(auths) {
				if (auths.authResult == null) {
					auths.login(
						(e) => {
							auths.getUserInfo(
								(res) => {
									var result = res.target;
									this.wxLogin(result.userInfo.unionid, result.userInfo.openid);
								},
								(err) => {
									alert("获取用户信息失败：" + err.message + " - " + err.code);
								}
							);
						},
						(e) => {
							alert("授权失败");
						}
					);
				} else {
					var result = auths.userInfo;
					this.wxLogin(result.unionid, result.openid);
				}
			},
			// 微信登陆
			weixin(e) {
				let data = {
					nickName: e.nickName,
					openId: e.openId,
					avatarUrl: e.avatarUrl,
					unionId: e.unionId,
					phone: uni.getStorageSync('phone')
				}
				this.$api.weiloing(data).then((res) => {
					if (res.data.result.newUser == 1) {
						uni.navigateTo({
							url: './weixinYanZen?data=' + JSON.stringify(data) 
						})
					} else {
						uni.switchTab({
							url: '/pages/tabbar/clientEndTabbar/ClientHome'
						})
					}
				})
			},
			wxLogin(unionId, openId) {
				let flag = "app";
				request({
					url: "",
					method: "get",
					data: {
						unionId: unionId,
						openId: openId,
						flag: flag,
					},
				}).then((res) => {
					this.isLoading = false;
					uni.showToast({
						title: "登陆成功,跳转中...",
						icon: "none"
					});
					setTimeout(function() {
						uni.switchTab({
							url: '/pages/index/index'
						});
					}, 1000)
				});
			},

		}
	}
</script>
<style lang="scss" scoped>
	page {
		background: #FFFFFF;
	}

	.big-tab {
		width: 173rpx;
		height: 173rpx;
		border-radius: 42rpx 42rpx 42rpx 42rpx;
		opacity: 1;
		filter: blur(undefinedpx);
		margin-top: -90rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
		z-index: 99999;
	}

	.common-height {
		height: calc(100% / 3);
	}

	.common-btn {
		font-size: 35rpx;
		text-align: center;
		width: 530rpx;
		background: #492D22;
		opacity: 1;
		height: 112rpx;
		text-align: center;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.phoneStyle {
		display: flex;
		align-items: center;
		margin-top: 80rpx;
	}

	.login-tip {
		margin-top: 30rpx;
		font-size: 25upx;
		color: #666666;
		text-align: center;
	}

	.yinseer {
		width: 690rpx;
		height: 66rpx;
		margin: 30rpx;
		background: rgba(30, 30, 30, 0.05);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		opacity: 1;
	}

	.selected {
		width: 690rpx;
		height: 112rpx;
		margin: 50rpx 30rpx 30rpx 30rpx;
		border-radius: 20rpx;
		border: 5rpx solid #492D22;
	}

	.sess {
		width: 690rpx;
		height: 112rpx;
		margin: 50rpx 30rpx 30rpx 30rpx;
		border-radius: 20rpx;
		border: 1rpx solid #7A6A56;
	}
</style>